<template>
    <XClickDialog ref='dialogRef' title='分配商户' width='400px' @close='close' :confirm='confirm'>
        <el-button type='primary' size='mini'>分配商户</el-button>
        <template #content>
            <XLazyloadSelect class='w-100' type='text' clearable  valueField='merchantId' labelField='merchantName' :loadFunc='queryMerchantNameApi' v-model='merchantId' />
        </template>
    </XClickDialog>
</template>

<script lang='ts' setup>
    import { ref } from 'vue'
    import { queryMerchantNameApi } from '../../api/merchant'
    import { allotMerchantApi } from '../../api/device'
    import { ElMessage } from 'element-plus'
    
    const props = defineProps<{
        deviceIds : number[]
    }>()

    const emit = defineEmits<{
        (e : 'success') : void
    }>()
    const dialogRef = ref()
    const merchantId = ref()

    async function confirm() {
        if(props.deviceIds.length == 0 || !merchantId.value) return

        const res = await allotMerchantApi(merchantId.value, props.deviceIds)
        if(res === true) {
            dialogRef.value.close()
            ElMessage.success('分配成功')
            emit('success')
        }else {
             ElMessage.error!('分配失败')
        }
    }

    function close() {
        merchantId.value = ''
    }
</script>
